<template>
  <div class="addressedit-container nav-bar-top">
     <van-nav-bar class="nav-bar" title="编辑地址" left-arrow @click-left="$router.back()"/>
     <van-address-edit
       :address-info="addressInfo"
       :area-list="areaList"
       :show-delete="showDelete"
       show-set-default
       show-search-result
       :search-result="searchResult"
       :area-columns-placeholder="['请选择', '请选择', '请选择']"
       @save="saveAddress"
       @delete="deleteAddress"
     />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import constants from '@/config/constants'
import userApi from '@/api/userApi';
import area from '@/config/area'

export default {
  name: 'addressEdit',
  computed: {
    ...mapState(['user'])
  },
  data () {
    return {
      showDelete: false,
      addressInfo: {},
      areaList: {
        province_list: area.province_list,
        city_list: area.city_list,
        county_list: area.county_list
      },
      searchResult: []
    }
  },
  created () {
    this.getAddressInfo();
  },
  methods: {
    /* 获取地址详情 */
    async getAddressInfo () {
      if(this.$route.query.id && this.user){
        const result = await userApi.addressDetail(this.$route.query.id);
        if(result.code == constants.SUCCESS){
          var address = result.data;
          this.addressInfo = {
            id: address.id.toString(),
            name: address.receiverName,
            tel: address.phone,
            province: address.provinceName,
            city: address.cityName,
            county: address.areaName,
            areaCode: address.areaId ? address.areaId.toString() : '',
            addressDetail: address.address,
            isDefault: address.defaultFlag == '0' ? false : true
          }
          this.showDelete = true;
        }
      }
    },
    /* 保存地址 */
    async saveAddress (content) {
      if(this.user){
       if(this.$route.query.id){
         const result = await userApi.updateAddress({
           addressId: content.id,
           memberId: this.user.id,
           receiverName: content.name,
           phone: content.tel,
           address: content.addressDetail,
           provinceId: content.areaCode.substring(0,2)+"0000",
           provinceName: content.province,
           cityId: content.areaCode.substring(0,4)+"00",
           cityName: content.city,
           areaId: content.areaCode,
           areaName: content.county,
           defaultFlag: content.isDefault ? '1' : '0'
         });
         if(result.code == constants.SUCCESS){
           this.$toast.success("修改成功");
           this.$router.go(-1);
         }
       }else{
         const result = await userApi.addAddress({
           memberId: this.user.id,
           receiverName: content.name,
           phone: content.tel,
           address: content.addressDetail,
           provinceId: content.areaCode.substring(0,2)+"0000",
           provinceName: content.province,
           cityId: content.areaCode.substring(0,4)+"00",
           cityName: content.city,
           areaId: content.areaCode,
           areaName: content.county,
           defaultFlag: content.isDefault ? '1' : '0'
         });
         if(result.code == constants.SUCCESS){
           this.$toast.success("添加成功");
           this.$router.go(-1);
         }
       }
      }
    },
    /* 删除收货地址 */
    async deleteAddress (content) {
      const result = await userApi.deleteAddress({
        addressId: content.id
      });
      if(result.code == constants.SUCCESS){
        this.$toast.success("删除成功");
        this.$router.go(-1);
      }
    }
  }
}
</script>

<style lang="scss">
.addressedit-container{
  padding: 0px 10px;
  .van-address-edit{
    padding: 10px 0px 0px 0px;
    .van-address-edit__buttons{
      padding: 30px 0px 0px 0px;
      .van-button--default{
        background-color: #fff !important;
        border: 0.02667rem solid #e6e6e6 !important;
        /deep/ .van-button__text{
          color: #333 !important;
        }
      }
    }
  }
}
</style>
